<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .rating {
            margin: 100px auto;
            height: 47px;
            width: 240px;
            /* 善用repeat-x这种方法，可以减小图片，同时利于扩展 */
            background: url(./img/rating.png) repeat-x;
            position: relative;
        }

        .rating-display {
            height: 47px;
            /* width: 240px; */
            background: url(./img/rating.png) repeat-x 0 -94px;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
        }

        .rating-mask {
            position: absolute;
            z-index: 2;
            height: 47px;
            width: 100%;
        }

        .rating-item {
            float: left;
            height: 47px;
            width: 48px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="rating" class="rating">
        <div class="rating-display"></div>
        <ul class="rating-mask">
            <li class="rating-item"></li>
            <li class="rating-item"></li>
            <li class="rating-item"></li>
            <li class="rating-item"></li>
            <li class="rating-item"></li>
        </ul>
    </div>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        (function () {
            var Rating = function (elem, option) {
                this.$elem = $(elem);
                this.option = $.extend({}, Rating.defaultOption, option);
                this.$item = this.$elem.find("li");
                this.itemWidth = 47
                this.option = option;
            }
            Rating.prototype.init = function () {
                this.lightOn(this.option.num);
                this.bindEvent();
            };
            Rating.prototype.lightOn = function (num) {
                num = parseInt(num);
                this.$elem.find(".rating-display").css("width", (47 * num) + "px");
            };
            Rating.prototype.bindEvent = function () {
                var self = this;
                this.$elem.on("mousemove", ".rating-item", function (event) {
                    var width = event.pageX - self.$elem.offset().left;
                    self.$elem.find(".rating-display").css("width", width + "px");
                }).on("mouseout", ".rating-item", function () {
                    self.$elem.find(".rating-display").css("width", 0);
                })
            };

            Rating.defaultOption = {
                total: 5,
                num: 3,
                readOnly: false,
                select: function () {},
                chosen: function () {},
            }

            var init = function (elem, opt) {
                new Rating(elem, opt).init();
            }

            $.fn.extend({
                rating: function (opt) {
                    return $(this).each(function () {
                        init(this, opt);
                    });
                }
            })
        })();

        $("#rating").rating({
            num: 3
        })
    </script>
</body>

</html>